﻿<div class="schedulers">
    @for(int i = 1; i <= 2; i++) {
        <div class="column-@i">
            @(Html.DevExtreme().Scheduler()
                .ID(string.Format("{0}{1}", "scheduler", i))
                .DataSource(d => d.Mvc()
                    .Controller("SchedulerSignalR")
                    .Key("AppointmentId")
                    .LoadAction("Get")
                    .UpdateAction("Put")
                    .InsertAction("Post")
                    .DeleteAction("Delete")
                )
                .Views(new[] {
                    SchedulerViewType.Day,
                    SchedulerViewType.WorkWeek
                })
                .CurrentView(SchedulerViewType.Day)
                .CurrentDate(new DateTime(2017, 5, 23))
                .StartDayHour(9)
                .EndDayHour(19)
                .Height(600)
                .TextExpr("Text")
                .DescriptionExpr("Description")
                .StartDateExpr("StartDate")
                .EndDateExpr("EndDate")
                .AllDayExpr("AllDay")
            )
        </div>
    }
</div>

<script src="~/signalr/signalr-session-id.js"></script>
<script src="~/signalr/signalr-client.js"></script>
<script>
var connection = new signalR.HubConnectionBuilder()
    .withUrl("@Url.Content("~/schedulerSignalRHub")", {
        skipNegotiation: true,
        transport: signalR.HttpTransportType.WebSockets
    })
    .configureLogging(signalR.LogLevel.Information)
    .build();

$(function () {
    var store1 = $("#scheduler1").dxScheduler("getDataSource").store();
    var store2 = $("#scheduler2").dxScheduler("getDataSource").store();

    connection.start()
        .then(function () {
            connection.on("update", function (key, data) {
                store1.push([{ type: "update", key: key, data: data }]);
                store2.push([{ type: "update", key: key, data: data }]);
            });

            connection.on("insert", function (data) {
                store1.push([{ type: "insert", data: data }]);
                store2.push([{ type: "insert", data: data }]);
            });

            connection.on("remove", function (key) {
                store1.push([{ type: "remove", key: key }]);
                store2.push([{ type: "remove", key: key }]);
            });
        });
});
</script>
